<template>
  <div class="login-wrapper">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="star"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <div class="login">
      <div class="projectName">
        <span>会议管理系统－忘记密码</span>
      </div>
      <ul class="login-list" @keyup.13="login">
        <li>
          <input id="userName" type="text" placeholder="请输入账号" v-model="count">
        </li>
        <li>
          <input id="password" type="name" placeholder="请输入姓名" v-model="name">
        </li>
        <li>
          <input id="password" type="name" placeholder="请输入预留联系方式" v-model="tel">
        </li>
        <li>
          <input id="password" type="password" placeholder="请输入新密码" v-model="newPassword">
        </li>
        <li>
          <a id="register" class="btn" @click="confirm">重置密码</a>
          <a id="register" class="backBtn" @click="back">返回</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Fetch from "mixins/fetch";

export default {
  data() {
    return {
      count:'',
      name:'',
      tel:'',
      newPassword: '',
    };
  },
  mixins: [Fetch],
  created() {
  },
  mounted() {

  },
  destroyed() {
  },
  methods: {
    // 重置密码操作
    confirm () {
            this.$_fetch_forgetPw(this.$qs.stringify({count:this.count,
                            newPw:this.newPassword,
                            name:this.name,
                            count:this.count,
                            tel:this.tel})).then(res=>{
                              if(res.code === 0 ){
                                        this.$message({
                                         message: "修改成功",
                                         type: "success"
                                  });
                                 window.history.back();
                              } else {
                                this.$message({
                                         message: "重置失败,信息有误",
                                         type: "fail"
                                  });
                              }
                            });
    },
    back () {
       window.history.back();
    }
  }
};
</script>
<style lang="scss" scoped>
.login-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  background: url("../assets/images/bj.jpg") no-repeat center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .login {
    width: 400px;
    height: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -172px 0 0 -200px;
    .projectName {
      width: 50%;
      margin: 20px auto 20px;
      font-size: 18px;
      color: #fff;
      text-align: center;
    }
    .login-list {
      width: 90%;
      margin: 0 auto;
      li {
        margin-bottom: 15px;
        input {
          padding: 13px 10px;
          border: 1px solid #e6e6e6;
          border-radius: 3px;
          font-size: 14px;
          width: 100%;
        }
        .btn {
          width: 30%;
          height: 45px;
          line-height: 45px;
          margin-top:3%;
          text-align: center;
          background: #17b5a6;
          font-size: 16px;
          color: #fff;
          display: inline-block;
          border-radius: 3px;
          &:hover {
            cursor: pointer;
          }
        }
        .backBtn {
          width: 30%;
          height: 45px;
          line-height: 45px;
          margin-top:3%;
          margin-left: 25%;
          text-align: center;
          background: #17b5a6;
          font-size: 16px;
          color: #fff;
          display: inline-block;
          border-radius: 3px;
          &:hover {
            cursor: pointer;
          }
        }
        }
      }
    }
  }
</style>
